<template>
  <!-- App.vue -->

  <v-app
    :dark="false"
  >

    <v-app-bar
      app

    >



      <v-col cols="4" sm="5" md="3" >
      <v-toolbar-title>天知道</v-toolbar-title>
      </v-col>
      <!--<v-spacer></v-spacer>-->
      <v-col cols="5" sm="2" md="3" class="pb-2">
        <v-text-field
          label="search"
          append-icon="mdi-magnify"
          v-model.lazy="search"
          @keyup.enter="queryWeather(search)"
          hide-details
        ></v-text-field>
      </v-col>

      <v-app-bar-nav-icon
        @click="aa"

      ></v-app-bar-nav-icon>

    </v-app-bar>



    <!-- Sizes your content based upon application components -->
    <v-content
      class="py-3"
    >
      <v-card
        class="mx-auto"
        max-width="400"
 >
        <v-list-item two-line>
          <v-list-item-content>
            <v-list-item-title class="headline">{{city}}</v-list-item-title>
            <v-list-item-subtitle>{{up[0].time}}, {{up[0].cond_txt}}</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>

        <v-card-text>
          <v-row align="center">
            <v-col class="display-3" cols="6">
              {{up[0].fl}}&deg;C
            </v-col>
            <v-col cols="6">
              <v-img
                src="https://cdn.vuetifyjs.com/images/cards/sun.png"
                alt="Sunny image"
                width="92"
              ></v-img>
            </v-col>
          </v-row>
        </v-card-text>

        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-send</v-icon>
          </v-list-item-icon>
          <v-list-item-subtitle>{{up[0].wind_spd}} km/h</v-list-item-subtitle>
        </v-list-item>

        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-cloud-download</v-icon>
          </v-list-item-icon>
          <v-list-item-subtitle>{{up[0].cloud}}%</v-list-item-subtitle>
        </v-list-item>

        <v-slider
          v-model="time"
          :max="6"
          :tick-labels="labels"
          class="mx-4"
          ticks
        ></v-slider>

        <v-list class="transparent">
          <v-list-item
            v-for="(item,i) in forecast"
            :key="i"
          >


            <v-list-item-title  v-if="item.day===0">Sunday</v-list-item-title>
            <v-list-item-title  v-else-if="item.day===1">Monday</v-list-item-title>
            <v-list-item-title  v-else-if="item.day===2">Tuesday</v-list-item-title>
            <v-list-item-title  v-else-if="item.day===3">Wednesday</v-list-item-title>
            <v-list-item-title  v-else-if="item.day===4">Thursday</v-list-item-title>
            <v-list-item-title  v-else-if="item.day===5">Friday</v-list-item-title>
            <v-list-item-title  v-else-if="item.day===6">Saturday</v-list-item-title>



            <v-list-item-icon  >
              <v-icon v-if="item.icon==='晴'">mdi-white-balance-sunny</v-icon>
              <v-icon v-if="item.icon==='阴'">mdi-cloud</v-icon>
              <v-icon v-if="item.icon==='多云'">mdi-weather-partly-cloudy</v-icon>
              <v-icon v-if="item.icon==='雾' || item.icon==='霾'">mdi-weather-fog</v-icon>
              <v-icon v-if="item.icon==='雪'||item.icon==='阵雪'||item.icon==='小雪'">mdi-snowflake</v-icon>
            </v-list-item-icon>

            <v-list-item-subtitle class="text-right"  >
              {{ item.temp }}
            </v-list-item-subtitle>

          </v-list-item>
        </v-list>

        <v-divider></v-divider>

        <v-card-actions>
          <v-btn text>Full Report</v-btn>
        </v-card-actions>
      </v-card>

    </v-content>

    <v-footer app>
      <!-- 生活指数预报-->
      <template
      >
        <div class="text-center px-9">
          <v-bottom-sheet v-model="sheet">
            <template v-slot:activator="{ on }">
              <v-btn
                color="blue lighten-3"
                dark
                v-on="on"
                @click="lifEstyle"
              >
                生活指数
              </v-btn>
            </template>
            <v-sheet class="text-center" height="370px">
              <v-btn
                class="mt-6"
                flat
                color="red"
                @click="sheet = !sheet"
              >关闭</v-btn>
              <div>
                <v-list class="transparent"
                >
                  <v-list-item
                    v-for="item in life"
                    :key="item.day"
                  >
                        <v-list-item-content v-if="item.type==='comf'" class="green accent-2">
                          <v-list-item-title >舒适度指数 :{{ item.brf }}</v-list-item-title>
                          <p class="text-center caption ">{{ item.txt }}</p>
                        </v-list-item-content>

                        <v-list-item-content  v-else-if="item.type==='drsg'" class="yellow lighten-3">
                          <v-list-item-title >穿衣指数 :{{ item.brf }}</v-list-item-title>
                          <p class="text-center caption">{{ item.txt }}</p>
                        </v-list-item-content>

                        <v-list-item-content  v-else-if="item.type==='flu'" class="cyan accent-1">
                          <v-list-item-title >感冒指数 :{{ item.brf }}</v-list-item-title>
                          <p class="text-center caption">{{ item.txt }}</p>
                        </v-list-item-content>
                  </v-list-item>
                </v-list>
              </div>
            </v-sheet>
          </v-bottom-sheet>
        </div>
      </template>


      <template>
        <div class="text-center px-9">
          <v-bottom-sheet v-model="sheet1">
            <template v-slot:activator="{ on }">
              <v-btn
                color="blue-grey lighten-3"
                dark
                v-on="on"
                @click="queryHourly"
              >
                逐时预报
              </v-btn>
            </template>
            <v-sheet class="text-center" height="250px">
              <v-btn
                class="mt-6"
                flat
                color="red"
                @click="sheet1 = !sheet1"
              >关闭</v-btn>
              <div>

                <v-row justify="space-around">
                  <v-col cols="12" sm="6" md="4">
                    <v-sheet elevation="10" class="py-4 px-1">
                      <v-chip-group
                        multiple
                        active-class="primary--text"
                      >
                        <v-list
                          v-for="item in hourly"
                        >
                          <v-divider></v-divider>
                          <v-list-item-content
                          >
                            <v-list-item-title >{{item.time.substring(item.time.length-5,item.time.length)}}</v-list-item-title>

                            <!--<v-icon >mdi-cloud</v-icon>-->

                              <v-icon v-if="item.cond_txt==='晴'">mdi-white-balance-sunny</v-icon>
                              <v-icon v-if="item.cond_txt==='阴'">mdi-cloud</v-icon>
                              <v-icon v-if="item.cond_txt==='多云'">mdi-weather-partly-cloudy</v-icon>
                              <v-icon v-if="item.cond_txt==='雾' || item.cond_txt==='霾'">mdi-weather-fog</v-icon>
                              <v-icon v-if="item.cond_txt==='雪'||item.icon==='阵雪'||item.icon==='小雪'">mdi-snowflake</v-icon>



                            <p class=" caption px-1">{{item.tmp}}&deg;C</p>
                          </v-list-item-content>
                          <v-divider></v-divider>
                        </v-list>
                      </v-chip-group>
                    </v-sheet>
                  </v-col>
                </v-row>

              </div>
            </v-sheet>
          </v-bottom-sheet>
        </div>
      </template>
    </v-footer>

  </v-app>


</template>

<script>


  export default {
    data() {
      return {
        city: "福州",
        up:[
          {time:"",cond_txt:"",fl:"",wind_spd:"",cloud:""},
        ],
        search:"",
        labels: ['SU', 'MO', 'TU', 'WED', 'TH', 'FR', 'SA'],
        time: 0,
        forecast: [
          { day: 2, icon: '晴', temp: '24\xB0/12\xB0' },
          { day: 3, icon: '阴', temp: '22\xB0/14\xB0' },
          { day: 4, icon: '多云', temp: '25\xB0/15\xB0' },
        ],


        //底
        sheet: false,
        sheet1: false,
        //和风
        life:[],
        daily:[],
        hourly:[]
      }
    },
    methods: {
      queryWeather(city) {
        this.$axios
          .get(`https://free-api.heweather.net/s6/weather/now?location=${city}&key=516506fe6a354b9eb9a5f0967794f7d5`)
          .then(res => {
            console.log(res.data );
            if (res.data.HeWeather6[0].status!="unknown location"){
              this.city=city
              this.up[0].time= res.data.HeWeather6[0].update.loc;
              this.up[0].cond_txt= res.data.HeWeather6[0].now.cond_txt;
              this.up[0].fl= res.data.HeWeather6[0].now.fl;
              this.up[0].wind_spd= res.data.HeWeather6[0].now.wind_spd;
              this.up[0].cloud= res.data.HeWeather6[0].now.hum;

            }
          })
          .catch(err => {
            console.log(err);
          })
          .finally(() => { });
      },
      lifEstyle(){
        this.$axios
          .get(`https://free-api.heweather.net/s6/weather/lifestyle?location=${this.city}&key=516506fe6a354b9eb9a5f0967794f7d5`)
          .then(res => {
            this.life = res.data.HeWeather6[0].lifestyle;
            console.log(this.life );
          })
          .catch(err => {
            console.log(err);
          })
          .finally(() => { });
      },
      queryDaily(){
        this.$axios
          .get(`https://free-api.heweather.net/s6/weather/forecast?location=${this.city}&key=516506fe6a354b9eb9a5f0967794f7d5`)
          .then(res => {
            this.daily = res.data.HeWeather6[0].daily_forecast;
            // console.log(new Date(this.daily[0].date ).getDay());
            let t
            for(let i=0;i<this.daily.length;i++){
              t=new Date(this.daily[i].date).getDay()
              if (t==this.time){
                console.log("t:"+t+"------"+"i:"+i)
                this.forecast[0].day=new Date(this.daily[i].date).getDay()
                this.forecast[0].icon=this.daily[i].cond_txt_d
                this.forecast[0].temp=this.daily[i].tmp_min+"\xB0/"+this.daily[i].tmp_max+"\xB0"

                if (i+1<=6){
                  this.forecast[1].day=new Date(this.daily[i+1].date).getDay()
                  this.forecast[1].icon=this.daily[i+1].cond_txt_d
                  this.forecast[1].temp=this.daily[i+1].tmp_min+"\xB0/"+this.daily[i+1].tmp_max+"\xB0"
                }else {
                  this.forecast[1].day=new Date(this.daily[i-6].date).getDay()
                  this.forecast[1].icon=this.daily[i-6].cond_txt_d
                  this.forecast[1].temp=this.daily[i-6].tmp_min+"\xB0/"+this.daily[i-6].tmp_max+"\xB0"
                }

                if (i+2<=6){
                  this.forecast[2].day=new Date(this.daily[i+2].date).getDay()
                  this.forecast[2].icon=this.daily[i+2].cond_txt_d
                  this.forecast[2].temp=this.daily[i+2].tmp_min+"\xB0/"+this.daily[i+2].tmp_max+"\xB0"
                }else {
                  this.forecast[2].day=new Date(this.daily[i-5].date).getDay()
                  this.forecast[2].icon=this.daily[i-5].cond_txt_d
                  this.forecast[2].temp=this.daily[i-5].tmp_min+"\xB0/"+this.daily[i-5].tmp_max+"\xB0"
                }
              }


            }

          })
          .catch(err => {
            console.log(err);
          })
          .finally(() => { });
      },
      clickSearch(city) {
        this.city = city;
        this.queryDaily();
      },
      queryHourly(){
        this.$axios
          .get(`https://free-api.heweather.net/s6/weather/hourly?location=${this.city}&key=516506fe6a354b9eb9a5f0967794f7d5`)
          .then(res => {
            this.hourly = res.data.HeWeather6[0].hourly;
            // console.log(this.hourly );
          })
          .catch(err => {
            console.log(err);
          })
          .finally(() => { });
      },
      aa(){
        console.log(this.city)
      }
    } ,
    watch: {
      city: { // 监视搜索字段
        handler() {
          this.queryDaily();
        }
      },
      time:{
        handler(){
          console.log(this.time );
          this.queryDaily();
        }
      }
    },

    created:function () {
      this.$axios
        .get(`https://free-api.heweather.net/s6/weather/now?location=${this.city}&key=516506fe6a354b9eb9a5f0967794f7d5`)
        .then(res => {
          console.log(res.data );
            this.up[0].time= res.data.HeWeather6[0].update.loc;
            this.up[0].cond_txt= res.data.HeWeather6[0].now.cond_txt;
            this.up[0].fl= res.data.HeWeather6[0].now.fl;
            this.up[0].wind_spd= res.data.HeWeather6[0].now.wind_spd;
            this.up[0].cloud= res.data.HeWeather6[0].now.hum;
            console.log(this.now);

        })
        .catch(err => {
          console.log(err);
        })
        .finally(() => { });
    }


  }
</script>

<style scoped>
  /*.box {*/
    /*width: 90%;*/
  /*}*/

</style>
